<template>
    <div class="background">
        <div class="common-layout">
            <el-container>
                <el-header class="header_background">
                    <div style="position: absolute; top: 0.1%; left: 2%;">
                        <img alt="" src="@/assets/logo1.png" style="width: 40px;">
                    </div>
                    <div style="position: absolute; top: 1.5%; left: 38%;">
                        <span style="font-size: 15px; font-weight: bold; color: whitesmoke">
                          您好，房东&nbsp;&nbsp;{{ username }}&nbsp;&nbsp;！欢迎进入房屋租赁平台！
                        </span>
                    </div>
                    <div class="right-info">
                      <el-button @click="SignOut" style="margin-right: 10px;">
                        <el-icon :size="18" style="margin-right: 5px;">
                          <avatar />
                        </el-icon>
                        退出登录
                      </el-button>
                    </div>
                </el-header>
                <el-header class="sub_header_background">
                  <el-menu
                    :default-active="activeIndex"
                    router
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#545c64"
                    text-color="whitesmoke"
                    active-text-color="white"
                    style="height: 102%;"
                    unique-opened
                  >
                    <el-menu-item index="/LandlordHome">首页</el-menu-item>
                    <el-menu-item index="/LandlordHouse">我的房源</el-menu-item>
                    <el-sub-menu index="transaction">
                      <template #title>交易管理</template>
                      <el-menu-item index="/ApplicationAudition">租客申请审核</el-menu-item>
                      <el-menu-item index="/LandlordTransactionRecord">交易记录</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/LandlordSelfInfo">个人信息</el-menu-item>
                  </el-menu>
                </el-header>
                <el-main>
                    <!-- 卡片容器 -->
                    <el-card id="personal-info-card" style="margin: 15px; min-height: calc(100vh - 111px);">
                      <div style="display: flex; justify-content: center;">
                        <div style="width: 600px; margin-left: 30px; position: relative">

                          <!-- 用户信息展示 -->
                          <div style="margin: 20px 0;">
                            <h3 class="personal-info-title" style="margin-bottom: 30px; color: #333;font-size: 30px;">👤 个人信息</h3>
                            <div style="display: flex; flex-wrap: wrap; gap: 20px;">

                              <!-- 房东ID -->
                              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                                <div style="display: flex; align-items: center;">
                                  <i class="el-icon-user" style="margin-right: 10px; color: #409EFF;"></i>
                                  <div style="position: relative; flex: 1;">
                                    <strong>房东ID</strong>
                                    <span style="margin-left: 10px; display: block;">{{ landlordId }}</span>
                                    <el-icon style="position: absolute; right: 0; top: 0;">
                                      <User />
                                    </el-icon>
                                  </div>
                                </div>
                              </el-card>

                              <!-- 用户名 -->
                              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                                <div style="display: flex; align-items: center;">
                                  <i class="el-icon-document" style="margin-right: 10px; color: #409EFF;"></i>
                                  <div style="position: relative; flex: 1;">
                                    <strong>用户名</strong>
                                    <span style="margin-left: 10px; display: block;">{{ username }}</span>
                                    <el-icon style="position: absolute; right: 0; top: 0;">
                                      <UserFilled />
                                    </el-icon>
                                  </div>
                                </div>
                              </el-card>

                              <!-- 手机号 -->
                              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                                <div style="display: flex; align-items: center;">
                                  <i class="el-icon-phone" style="margin-right: 10px; color: #409EFF;"></i>
                                  <div style="position: relative; flex: 1;">
                                    <strong>手机号</strong>
                                    <span style="margin-left: 10px; display: block;">{{ phone }}</span>
                                    <el-icon style="position: absolute; right: 0; top: 0;">
                                      <Iphone />
                                    </el-icon>
                                  </div>
                                </div>
                              </el-card>

                              <!-- 邮箱 -->
                              <el-card shadow="hover" style="width: calc(50% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; user-select: none;">
                                <div style="display: flex; align-items: center;">
                                  <i class="el-icon-message" style="margin-right: 10px; color: #409EFF;"></i>
                                  <div style="position: relative; flex: 1;">
                                    <strong>邮箱</strong>
                                    <span style="margin-left: 10px; display: block;">{{ email }}</span>
                                    <el-icon style="position: absolute; right: 0; top: 0;">
                                      <Message />
                                    </el-icon>
                                  </div>
                                </div>
                              </el-card>

                            </div>
                          </div>

                          <!-- 修改按钮 -->
                          <el-tooltip content="修改信息" placement="bottom">
                            <el-button
                              icon="Edit"
                              size="large"
                              type="primary"
                              style="
                                margin-top: 30px;
                                width: 80px;
                                transition: transform 0.2s ease;
                              "
                              @click="Edit"
                              @mouseenter.native="e => e.target.style.transform = 'scale(1.1)'"
                              @mouseleave.native="e => e.target.style.transform = 'scale(1)'"
                            >
                            </el-button>
                          </el-tooltip>

                        </div>
                      </div>
                    </el-card>

                    <!-- 修改信息弹窗 -->
                    <el-dialog v-model="dialogVisible" title="操作" width="30%" @close="resetForm">
                      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="房东ID" prop="landlordId">
                          <el-input v-model="form.landlordId" disabled style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" prop="username">
                          <el-input v-model="form.username" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                          <el-input v-model="form.password" :disabled="disabled" show-password style="width: 80%"></el-input>
                          <el-tooltip content="修改密码" placement="right">
                            <el-icon size="large" style="margin-left: 5px; cursor: pointer" @click="EditPass">
                              <edit />
                            </el-icon>
                          </el-tooltip>
                        </el-form-item>
                        <!-- <el-form-item label="确认密码" prop="checkPass" :style="display">
                          <el-input v-model="form.checkPass" show-password style="width: 80%"></el-input>
                        </el-form-item> -->
                        <el-form-item label="手机号" prop="phone">
                          <el-input v-model.number="form.phone" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱地址" prop="email">
                          <el-input v-model="form.email" style="width: 80%"></el-input>
                        </el-form-item>
                      </el-form>
                      <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="cancel">取 消</el-button>
                          <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                      </template>
                    </el-dialog>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script>
import request from "@/axios/request";
const {ElMessage} = require('element-plus');
export default {
  data() {
    return {
      loading: true,
      landlordId: '',
      username: '',
      password: '',
      phone: '',
      email: '',
      dialogVisible: false,

      form: {
        landlordId: '',
        username: '',
        password: '',
        checkPass: '',
        phone: '',
        email: ''
      },

      rules: {
        // 验证规则（可根据实际需求扩展）
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在2到20个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码至少6位', trigger: 'blur' }
        ],
        checkPass: [
          { validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            }, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] }
        ]
      },
      display: { display: 'none' },
      disabled: true
    };
  },
  mounted() {
    this.fetchUserInfo();
  },

  methods: {
    async fetchUserInfo() {
      let token = JSON.parse(window.sessionStorage.getItem('userInfo'));
      const landlordId = token.landlordId;
      const res = await request.get(`/landlord/findById/${landlordId}`);
      if (res.code === 200) {
        token=res.data;
      } else {
        ElMessage.error("获取用户信息失败");
      }
      console.log(token);
      if(!token) {
          ElMessage.error("获取用户信息失败");
          console.log("获取用户信息失败");
          return;
      }
      this.landlordId = token.landlordId;
      this.username = token.username;
      this.password = token.password;
      this.phone = token.phone;
      this.email = token.email;

      console.log(token);
    },
    Edit() {
      this.form.landlordId = this.landlordId;
      this.form.username = this.username;
      this.form.password = this.password;
      this.form.phone = this.phone;
      this.form.email = this.email;
      this.dialogVisible = true;
    },
    cancel() {
      this.resetForm();
      this.dialogVisible = false;
    },
    save() {
      console.log('提交数据:', this.form);

      fetch('/landlord/updateById', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.form)
      })
        .then(res => res.json())
        .then(data => {
          if (data.success) {
            this.fetchUserInfo(); // 刷新页面数据
          } else {
            alert('更新失败，请重试');
          }
        })
        .catch(err => {
          console.error('请求出错:', err);
        });

      this.resetForm();
      this.dialogVisible = false;
    },
    EditPass() {
      this.disabled = false;
      this.display.display = 'block';
    },
    resetForm() {
      this.form.username = this.username;
      this.form.password = this.password;
      this.form.checkPass = '';
      this.form.phone = this.phone;
      this.form.email = this.email;

      this.disabled = true;
      this.display.display = 'none';

      if (this.$refs.formRef && this.$refs.formRef.resetFields) {
        this.$refs.formRef.resetFields();
      }
    },
    SignOut() {
      sessionStorage.clear();
      ElMessage({
          message: '用户退出登录',
          type: 'success',
      });
      this.$router.replace({ path: '/Login' });
    },
  }
};
</script>

<style scoped>
.background {
  background-color: whitesmoke;
  height: 100vh;
}
.header_background {
  background-color: #1b4989;
  height: 6vh;
}
.sub_header_background {
  background-color: #545c64;
  height: 7vh;
}
.right-info {
  width: 100px;
  position: absolute;
  right: 2%;
  top: 0.7%
}

.right-info:hover {
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: #409EFF;
}
</style>